<template>
  <div>
    <el-button type="danger" @click="batchDelete">批量删除</el-button>
    <el-tree
      :data="data" :props="defaultProps" show-checkbox node-key="id" ref="categoryTree"
      :default-expanded-keys="expandedKey" :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            v-if="node.level <= 2"
            type="text"
            size="mini"
            @click="append(node, data)">
            Append
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="update(node, data)">
            Edit
          </el-button>
          <el-button
            v-if="node.childNodes.length === 0"
            type="text"
            size="mini"
            @click="() => remove(node, data)">
            Delete
          </el-button>
        </span>
      </span>
    </el-tree>
    <el-dialog title="添加分类" :visible.sync="dialogVisible" width="30%">
      <el-form :model="category" label-width="120px">
        <el-form-item label="菜单名称">
          <el-input v-model="category.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否显示（0 不显示，1 显示）">
          <el-input v-model="category.isShow" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单图标">
          <el-input v-model="category.icon" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="统计单位">
          <el-input v-model="category.proUnit" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品数量">
          <el-input v-model="category.proCount" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="() => addCategory()">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>


<script>
export default {
  data() {
    return {
      data: [],
      expandedKey: [],
      category: {
        id: null,
        name: '',
        parentId: 0,
        catLevel: 0,
        isShow: 1,
        sort: 0,
        icon: '',
        proUnit: '',
        proCount: 0
      },
      dialogVisible: false,
      defaultProps: {
        children: 'childrenCategories',
        label: 'name'
      }
    };
  },
  methods: {
    batchDelete () {
      var categoryTree = this.$refs.categoryTree.getCheckedNodes()
      console.log("categroyTree => ", categoryTree)
      var ids = []
      var categoryNames = []
      for(var i=0; i < categoryTree.length; i++){
        ids.push(categoryTree[i].id)
        categoryNames.push(categoryTree[i].name)
      }
      this.$confirm(`此操作将永久删除 【 ${categoryNames} 】, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/commodity/category/delte'),
          // url: 'http://localhost:9090/commodity/category/delete',
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          // this.expandedKey = [node.parent.data.id]
          this.getCategoryTree()
        })
      }).catch(() => {
      })
    },
    // update(node, data) {
    //   console.log("node => ", node, "data => ", data)
    //   this.dialogVisible = true
    //   this.category.id = data.id
    //   this.category.parentId = data.parentId
    //   this.category.catLevel = data.catLevel
    //   this.category.name = data.name
    //   this.category.isShow = data.isShow
    //   this.category.sort = data.sort
    //   this.category.icon = data.icon
    //   this.category.proUnit = data.proUnit
    //   this.category.proCount = data.proCount
    // },
    update(node, data) {
      console.log("node => ", node, "data => ", data)
      this.dialogVisible = true
      this.$http({
        url: this.$http.adornUrl(`/commodity/category/info/${data.id}`),
        // url: `http://localhost:9090/commodity/category/info/${data.id}`,
        method: 'get'
      }).then((res) => {
        console.log("res => ", res)
        this.category.id = data.id
        this.category.parentId = res.data.category.parentId
        this.category.catLevel = res.data.category.catLevel
        this.category.name = res.data.category.name
        this.category.isShow = res.data.category.isShow
        this.category.sort = res.data.category.sort
        this.category.icon = res.data.category.icon
        this.category.proUnit = res.data.category.proUnit
        this.category.proCount = res.data.category.proCount
      })
    },
    addCategory() {
      var category = this.category
      var requestUrl = ''
      if (!category.id) {
        requestUrl = this.$http.adornUrl('/commodity/category/save')
        // requestUrl = 'http://localhost:9090/commodity/category/save'
      } else {
        requestUrl = this.$http.adornUrl('/commodity/category/update')
        // requestUrl = 'http://localhost:9090/commodity/category/update'
      }
      this.$http({
        url: requestUrl,
        method: 'post',
        data: this.$http.adornData(JSON.parse(JSON.stringify(category)), false)
      }).then(() => {
        this.$message({
          type: 'success',
          message: '添加成功!'
        });
        this.expandedKey = [this.category.parentId]
        this.getCategoryTree()
      })
      this.dialogVisible = false
    },
    append(node, data) {
      console.log("node => ", node, "data => ", data)
      this.dialogVisible = true
      this.category.parentId = data.id
      this.category.catLevel = data.catLevel + 1
      this.category.name = ''
      this.category.icon = ''
      this.category.isShow = 1
      this.category.proCount = 0
      this.category.proUnit = ''
      this.category.sort = 0
      console.log("category => ", this.category)
    },

    remove(node, data) {
      // console.log("node => ", node, " data => ", data)
      var ids = [data.id]
      this.$confirm('此操作将永久删除 【' + data.name + '】, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/commodity/category/delete'),
          // url: 'http://localhost:9090/commodity/category/delete',
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.expandedKey = [node.parent.data.id]
          this.getCategoryTree()
        })
      }).catch(() => {
      })
    },
    getCategoryTree() {
      this.$http({
        url: this.$http.adornUrl('/commodity/category/list/tree'),
        // url: 'http://localhost:9090/commodity/category/list/tree',
        method: 'get'
      }).then(({data}) => {
        console.log('data => ', data);
        this.data = data.data;
      })
    },
  },

  created() {
    this.getCategoryTree();
  }
}
;
</script>
